<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="managesystem.Student" %>
<%@ page import="managesystem.Buddy" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="java.util.Collection" %>
<%@ page import="controlsystem.Course" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.Iterator" %>
<%@ page import ="controlsystem.Badge" %>
<%@ page import ="controlsystem.AlertController" %>
<%@ page import ="controlsystem.Alert" %>
<%@ page import ="java.util.Map" %>
<%@ page import ="controlsystem.MilestoneController" %>
<%@ page import="controlsystem.Milestone" %>
<%@ page import="controlsystem.CourseManager" %>
<%@ page import="controlsystem.StatisticsController" %>


<%
	Student currStud = (Student) session.getAttribute("currStud");
	List<Course> courses = currStud.getCourses();
	Collection<Badge> badges = currStud.getBadges();
	ArrayList<Alert> alerts = AlertController.returnAlert(currStud);
	List<Buddy> buddies = currStud.getBuddies();
	String[] places = currStud.getPlaces();
	String[] distractions = currStud.getDistractions();
	String[] aidTools = currStud.getAids();
    List<Milestone> milestones2 = MilestoneController.checkProgress(currStud);
  
 
%>

<script type="text/javascript" src="../scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../scripts/jquery-ui-1.8.16.custom.min.js"></script>
<link type="text/css" href="../styles/start/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<link type="text/css" href="../styles/dashboard.css" rel="stylesheet" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="../scripts/jquery.blockUI.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script> 
<script>
$(function() {
	$( ".column" ).sortable({
		connectWith: ".column"
	});

	$( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
	.find( ".portlet-header" )
	.addClass( "ui-widget-header ui-corner-all" )
	.prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
	.end()
	.find( ".portlet-content" );
	
	$( ".portlet-header .ui-icon" ).click(function() {
		$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
		$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
	});
	
	$( ".column" ).disableSelection();
	showPlot();
});
</script>

<script>
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    
    function showPlot() {
    drawPlot();
    setTimeout("convert()", 200);
    }
    
    function convert() {
    toImg(document.getElementById('chart_div'), document.getElementById('img_div'));
    }
    
	function drawPlot() {
	
		data = new google.visualization.DataTable();
		data.addColumn('string', 'Course');
		    data.addColumn('number', 'Hours');
		<%
		
		  HashMap<Course,Double> hoursPerCourse = StatisticsController.getTimePerCourse(currStud);
		  Iterator<Map.Entry<Course,Double>> it_plot = hoursPerCourse.entrySet().iterator();
		  int i = 0;
		  while (it_plot.hasNext()) {
		  Map.Entry<Course,Double> pairs = (Map.Entry<Course,Double>)it_plot.next();
		%> 
		  data.addRow();
		  var courseName = "<%=((Course)pairs.getKey()).getName()%>"
		  var numberHours = <%=pairs.getValue()%>
		  data.setCell( <%=i%> , 0, courseName);
		  data.setCell( <%=i%> , 1, numberHours);  
		  <%
		  i++;
		  }
		  %>
		  chart = new google.visualization.PieChart(document.getElementById('chart_div'));
		  chart.draw(data, 
		  {
		  width: 250, height: 150,
		  colors:['#39869b','#46a1b9','#7cbbcf','#b5d4e0'],
		  wmode: 'flash'
		  });
	} 
	
	function getImgData(chartContainer) {
	
        var chartArea = chartContainer.getElementsByTagName('iframe')[0].contentDocument.getElementById('chartArea');
        var svg = chartArea.innerHTML;
        var doc = chartContainer.ownerDocument;
        var canvas = doc.createElement('canvas');
        
        canvas.setAttribute('width', chartArea.offsetWidth);
        canvas.setAttribute('height', chartArea.offsetHeight);
        canvas.setAttribute(
            'style',
            'position: absolute; ' +
            'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
            'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
        
        doc.body.appendChild(canvas);
        
        canvg(canvas, svg);
        var imgData = canvas.toDataURL("image/png");
        
        canvas.parentNode.removeChild(canvas);
        
        return imgData;
      }
      
      function toImg(chartContainer, imgContainer) { 
        var doc = chartContainer.ownerDocument;
        var img = doc.createElement('img');
        img.src = getImgData(chartContainer);
        while (imgContainer.firstChild) {
          imgContainer.removeChild(imgContainer.firstChild);
        }
        
        imgContainer.appendChild(img);
      }
</script>
<div class="column">
	<div class="portlet">
		<div class="portlet-header">Statistics</div>
		<div class="portlet-content">
			<div id='chart_div' style="visibility:hidden; position: absolute; left: 10px;" >test</div>	
			<div id='img_div'></div>
			<input type="button" value="Go to plots" onClick = "location.href='/index.jsp?id=plot'"> 
		</div>
	</div>
	
	
	<div class="portlet">
		<div class="portlet-header">Alerts</div>
		<div class="portlet-content">
			<% 
			if(alerts.size()!=0) {
			%><ul><%
			    for (Iterator<Alert> iter = alerts.iterator(); iter.hasNext();) {
			      Alert a = iter.next();
			      %>
			<li><%=a.getDescription()%></li>
			      <%
			    }
			%></ul><%
			}
			else{
			%>
			No alerts.
			<%
			}
			    %>
		</div>
	</div>
	<div class="portlet">
		<div class="portlet-header">Milestones</div>
			<div class="portlet-content">
			<input type="button" id="addMilestones" value="Add Milestones"><br>
			<input type="button" id="ShowMilestones" value="Show Milestones" onClick="location.href='index.jsp?id=milestones'"><br>
		</div>
	</div>
</div>
<div class="column">
	<div class="portlet">
		<div class="portlet-header">Badges</div>
		<div class="portlet-content">
			<%if(badges.size()!=0){%>
			<%for(Iterator<Course> it = courses.iterator(); it.hasNext();) {
				Course c = it.next();%>
				<b><%=c.getName()%></b><br />
				<%for (Iterator<Badge> iter = badges.iterator(); iter.hasNext();) {
			      	Badge b = (Badge) iter.next();
			      	if(b.getCourseName().equals(c.getName())) {
			    %><img src="../images/badge_pos.jpg" alt="Badge" align="left" width="16" height="16" /> <%=b.getName()%><br />
			      	<%}
			      	}%>
			   <%}%>
			   <%}else{%>
				<p>No badges.</p>
			<%}%>
		</div>
	</div>
	<div class="portlet">
	<div class="portlet-header">Buddies</div>
	<div class="portlet-content">
	<% 
	for(Buddy b : buddies){
	System.out.println(b);
	}
	if(buddies.size()!=0) {
	%><ul><%
	    for (Iterator<Buddy> iter = buddies.iterator(); iter.hasNext();) {
	      Buddy b = iter.next();
	      %>
	<li><%=b.getFirstname()+" "+b.getLastname()%></li>
	      <%
	    }
	%></ul><%
	}
	else{
	%>
	<p>No buddies.</p>
	<%
	}
	    %>
	    <input type="button" id="addBuddy" value="Add Buddy">
	    <input type="button" id="deleteBuddy" value="Delete Buddy"> 
	</div>
	</div>
</div>

<div class="column">
	<div class="portlet">
		<div class="portlet-header">Places</div>
		<div class="portlet-content">
		<%if(places.length != 0)
		{
		%>
		<ul>
			<%for(String place : places)
			{
			 %>
			 <li><%=place %></li>
			 <% } %>
		</ul>
		<%} else { %>
		<p>No places.</p><% } %>
		 <input type="button" id="addPlace" value="Add Place"> 
		 <input type="button" id="deletePlace" value="Delete Place"> 
		</div>
	</div>
	<div class="portlet">
		<div class="portlet-header">Distractions</div>
		<div class="portlet-content">
		<% if (distractions.length != 0) { %>
			<ul><%
			    for (String distraction : distractions) {
			      %>
			<li><%=distraction%></li>
			      <%
			    }
			%></ul><%
			}
			else{
			%>
			<p>No distractions.</p>
			<%
			}
			    %>
			<input type="button" id="addDistraction" value="Add Distraction"> 
			<input type="button" id="deleteDistraction" value="Delete Distraction">
		</div>
	</div>
	<div class="portlet">
		<div class="portlet-header">Aidtools</div>
		<div class="portlet-content">
			<% 
			if(aidTools.length !=0) {
			%><ul><%
			    for (String aidTool : aidTools) {
			      %>
			<li><%=aidTool%></li>
			      <%
			    }
			%></ul><%
			}
			else{
			%>
			<p>No aidtools.</p>
			<%
			}
			    %>
			<input type="button" id="addAidTool" value="Add Aidtool"> 
			<input type="button" id="deleteAidTool" value="Delete Aidtool">
		</div>
	</div>
	<div class="portlet">
		<div class="portlet-header">Activities</div>
		<div class="portlet-content">
			<p>Activities done :<%=currStud.getAct().size() %> </p>
		</div>
	</div>
</div>

	<form action="/addBuddy" method="post" id="buddyForm" style="display:none">
			<p>Add a buddy.</p><br>
            <input type="hidden" name="tempId" />
            <label>First Name :</label>
            <input type="text" name="firstName"/><br>
            <label>Last Name :</label>
            <input type="text" name="lastName"/><br>
            <br><input type="submit" id="addBuddy" value="add Buddy"><br>
            <input type="button" id="cancelBuddy" value="cancel">
	</form>
<script>
$("#addBuddy").click(function () {
	$.blockUI({
		message : $('#buddyForm')
	});
	$('#addBuddy').click(function() {
		document.forms["buddyForm"].submit();
	});
	$('#cancelBuddy').click(function() {
		$.unblockUI();
		return false;
	});
    });
</script>
<form action="/deleteBuddy" method="post" id="deleteBuddyForm" style="display:none">
			<p>Delete a buddy.</p>
			<input type="hidden" name="tempId" />
            <td>Buddy :
            <select name="delBuddy">
            <%List<Buddy> delBuddies = currStud.getdeleteableBuddies();
            Iterator<Buddy> iteratorB = delBuddies.iterator();
            while(iteratorB.hasNext()){ 
           	Buddy delBuddy = iteratorB.next();
           	String nameBuddy = delBuddy.getFirstname() +" " + delBuddy.getLastname();
           	System.out.println(nameBuddy);
            %>
  			<option value="<%=nameBuddy%>"><%=nameBuddy%></option>
  			<% } %>
			</select></td>
            <br><input type="submit" id="deleteBuddy" value="delete Buddy"><br>
            <input type="button" id="cancelDeleteBuddy" value="cancel">
	</form>
<script>
$("#deleteBuddy").click(function () {
	$.blockUI({
		message : $('#deleteBuddyForm')
	});
	$('#deleteBuddy').click(function() {
		document.forms["deleteBuddyForm"].submit();
	});
	$('#cancelDeleteBuddy').click(function() {
		$.unblockUI();
		return false;
	});
    });
</script>

<form action="/addPlace" method="post" id="placeForm" style="display:none" >
			<p>Add a place.</p><br>
            <input type="hidden" name="tempId" />
            <label>Place :</label>
            <input type="text" name="place"/><br>
            <br><input type="submit" id="addPlace" value="add PLace"><br>
            <input type="button" id="cancelPlace" value="cancel">
	</form>
<script>
$("#addPlace").click(function () { 
	$.blockUI({
		message : $('#placeForm')
	});
	$('#addPlace').click(function() {
		document.forms["placeForm"].submit();
	});
	$('#cancelPlace').click(function() {
		$.unblockUI();
		return false;
	});
    });
</script>

<form action="/deletePlace" method="post" id="deletePlaceForm" style="display:none" >
			<p>Delete a place.</p><br>
            <input type="hidden" name="tempId" />
            <td>Distraction :
            <select name="delPlace">
            <%List<String> delPlaces = currStud.getdeleteablePlaces();
            Iterator<String> iteratorPl = delPlaces.iterator();
            while(iteratorPl.hasNext()){ 
            String delPlace = iteratorPl.next();
            %>
  			<option value="<%=delPlace%>"><%=delPlace%></option>
  			<% } %>
			</select></td>
            <br><input type="submit" id="deletePlace" value="delete Place"><br>
            <input type="button" id="cancelDeletePlace" value="cancel">
	</form>
<script>
$("#deletePlace").click(function () { 
	$.blockUI({
		message : $('#deletePlaceForm')
	});
	$('#deletePlace').click(function() {
		document.forms["deletePlaceForm"].submit();
	});
	$('#cancelDeletePlace').click(function() {
		$.unblockUI();
		return false;
	});
    });
</script>

<form action="/addDistraction" method="post" id="distractionForm" style="display:none">
			<p>Add a distraction.</p><br>
            <input type="hidden" name="tempId" />
            <label>Distraction :</label>
            <input type="text" name="distraction"/><br>
            <br><input type="submit" id="add" value="add Distraction"><br>
            <input type="button" id="cancelDistraction" value="cancel">
	</form>
<script>
$("#addDistraction").click(function () { 
	$.blockUI({
		message : $('#distractionForm')
	});
	$('#add').click(function() {
		document.forms["distractionForm"].submit();
	});
	$('#cancelDistraction').click(function() {
		$.unblockUI();
		return false;
	});
    });
</script>
<form action="/deleteDistraction" method="post" id="deleteDistractionForm" style="display:none" >
			<p>Delete a distraction.</p><br>
            <input type="hidden" name="tempId" />
            <td>Distraction :
            <select name="delDistraction">
            <%List<String> delDistractions = currStud.getdeleteableDistractions();
            Iterator<String> iteratorDis = delDistractions.iterator();
            while(iteratorDis.hasNext()){ 
            String delDistraction = iteratorDis.next();
            System.out.println(delDistraction);
            %>
  			<option value="<%=delDistraction%>"><%=delDistraction%></option>
  			<% } %>
			</select></td>
            <br><input type="submit" id="deleteDistraction" value="delete Distraction"><br>
            <input type="button" id="cancelDeleteDistraction" value="cancel">
	</form>
<script>
$("#deleteDistraction").click(function () { 
	$.blockUI({
		message : $('#deleteDistractionForm')
	});
	$('#deleteDistraction').click(function() {
		document.forms["deleteDistractionForm"].submit();
	});
	$('#cancelDeleteDistraction').click(function() {
		$.unblockUI();
		return false;
	});
    });
</script>

</script>
	<form action="/addAidTool" method="post" id="aidToolForm" style="display:none">
			<p>Add a aidtool.</p><br>
            <input type="hidden" name="tempId" />
            <label>AidTool :</label>
            <input type="text" name="aidtool"/><br>
            <br><input type="submit" id="add" value="add aidtool"><br>
            <input type="button" id="cancelAidTool" value="cancel">
	</form>
<script>
$("#addAidTool").click(function () { 
	$.blockUI({
		message : $('#aidToolForm')
	});
	$('#add').click(function() {
		document.forms["aidToolForm"].submit();
	});
	$('#cancelAidTool').click(function() {
		$.unblockUI();
		return false;
	});
    });
</script>
 <form action="/deleteAidTool" method="post" id="deleteAidToolForm" style="display:none" >
			<p>Delete a aidtool.</p><br>
            <input type="hidden" name="tempId" />
            <td>Aidtool :
            <select name="delAidTool">
            <%List<String> delAidTools = currStud.getdeleteableAidTools();
            Iterator<String> iteratorA = delAidTools.iterator();
            while(iteratorA.hasNext()){ 
           	String delAidtool = iteratorA.next();
            %>
  			<option value="<%=delAidtool%>"><%=delAidtool%></option>
  			<% } %>
			</select></td>
            <br><input type="submit" id="deleteAidTool" value="delete AidTool"><br>
            <input type="button" id="cancelDeleteAidTool" value="cancel">
	</form>
<script>
$("#deleteAidTool").click(function () { 
	$.blockUI({
		message : $('#deleteAidToolForm')
	});
	$('#deleteAidTool').click(function() {
		document.forms["deleteAidToolForm"].submit();
	});
	$('#cancelDeleteAidTool').click(function() {
		$.unblockUI();
		return false;
	});
    });
</script>
 
<form action="/addMilestone" method="post" id="milestoneForm" style="display:none" onsubmit="return checkform(this);">
	<fieldset>
	<legend><u><b><p>New Milestone</p></b></u></legend>
	
	<td>Select the course:</td>
	
	<td><select id="vak" name="vak" class="txtBox">
		<option value="">-select-</option>
		<%
		                
		            Iterator<Course> it2 = courses.iterator();
		          while (it2.hasNext()) {
		        Course course = (Course)it2.next();
		            %> <!-- alle vakken invoegen -->
		<option value="<%=course.getName()%>"><%=course.getName()%></option>
		<%
		} 
		%>
	</select></td>
	
	<td><span id="msg_gender"></span>&nbsp;</td> <br><br>
	<td>Description: <input type="text" name="description" /></td> 
	<p>Date: <input type="text" id="datepicker" name="datepicker"></p>
	
	
	<input type="button" id="duurButton" name="duurButton" value="Add duration">
	<input type="button" id="pagButton" value="Add amount of pages">
	<div id="duur" style="display: none" class="numbersOnly">
	<p>Amount of hours: <input type="text" id="duration" name="duration" value=0 onkeypress='validate(event)'></p>
	</div>
	<div id="pag" style="display: none">
	<p>Amount of pages:<input type="text" id="pages" name="pages"value=0 onkeypress='validate(event)'></p>
	</div>
	<div>
	<input type="submit" value="Add Milestone" action="/addMilestone" method="post" />
	</div>
	<input type="button" id="cancelMilestone" value="cancel">
	</fieldset>
</form>

<script language="JavaScript" type="text/javascript">

function checkform ( form )
{
  // see http://www.thesitewizard.com/archive/validation.shtml
  // for an explanation of this script and how to use it on your
  // own website

  // ** START **
   if (form.vak.value == "") {
	    alert( "Please enter a course." );
	    form.vak.focus();
	    return false ;
	  }
	  
  if (form.datepicker.value == "") {
	    alert( "Please enter an end date." );
	    form.datepicker.focus();
	    return false ;
	  }
  if (form.duration.value=="0" &&form.pages.value == "0") {
	    alert( "Please enter a number of pages or hours." );
	    form.duurButton.focus();
	    return false ;
	  }
 

  return true ;
}

</script>

<script>
    $('#duurButton').click(function () { 
    if($(this).val()=="Add duration"){    
    $('#duration').val(0);
    $('#duur').show();
    $(this).val("Delete duration");
    $('#pagButton').hide();
}
    else{    
    $('#duur').hide();
    $(this).val("Add duration");
    $('#duration').val(0);
    $('#pagButton').show();
    }
     });

     $('#pagButton').click(function () { 
     if($(this).val()=="Add amount of pages"){ 
        $('#pages').val(0);  
    $('#pag').show();
    $(this).val("Delete amount of pages");
    $('#duurButton').hide();
     }
     else{ 
        $('#pag').hide();
        $(this).val("Add amount of pages");
        $('#pages').val(0);
        $('#duurButton').show();
         }
     });
  // Datepicker
  $('#datepicker').datepicker({
  inline: true 
  });     
     
 </script>
 <script>
 function validate(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}
 </script> 
 
<script>
$("#addMilestones").click(function () { 
$.blockUI({
message : $('#milestoneForm')
});
$('#cancelMilestone').click(function() {
$.unblockUI();
return false;
});
    });
 </script>  

<script>

$("#showMilestones").click(function () { 
$('#cancel').click(function() {
$.unblockUI();
return false;
});
    });
 </script>  